<!--  -->
<template>
  <div class="other-ways">
    <div class="header">
      <span class="line"></span>
      <span class="txt">或使用以下方式登录</span>
      <span class="line"></span>
    </div>
    <ul>
      <li>
        <img src="../../assets/images/wx.png" alt="第三方登录" />
        <span>微信登录</span>
      </li>
      <li>
        <img src="../../assets/images/wb.png" alt="第三方登录" />
        <span>微博登录</span>
      </li>
      <li>
        <img src="../../assets/images/QQ.png" alt="第三方登录" />

        <span>QQ登录</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
/* 第三方登录 */
.other-ways .header {
  display: flex;
  align-items: center;
}
.other-ways .header .line {
  flex: 1;
  height: 1px;
  background-color: #000;
}
.other-ways .header .txt {
  margin: 0 6px;
  font-size: 14px;
}
.other-ways ul {
  display: flex;
  margin: 40px auto;
}
.other-ways ul li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.other-ways ul li img {
  width: 50px;
  height: 50px;
}
.other-ways ul li span {
  margin-top: 10px;
  color: #5eb5f8;
}
</style>